<template>
  <div class="search">
    <el-button type="primary" class="btn" @click="$router.go(-1)">回到主页</el-button>
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="品类ID" width="180" />
        <el-table-column prop="name" label="品类名称" width="180" />
        <el-table-column prop="date" label="创建时间" />
        <el-table-column prop="sonName" label="子品类" />
        <el-table-column prop="data" label="操作" >
          <template #default="scope">
            <el-button type="primary" :icon="Edit"  size="small" @click="editRow(scope.row)"/>
            <el-button type="success" :icon="Share"   size="small" @click="watchRow(scope.row)"/>
            <el-button type="danger" :icon="Delete"   size="small" @click="deleteRow(scope.row)"/>
          </template>
        </el-table-column>
    </el-table>
  </div>
</template>


<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

import {reactive,onMounted ,ref} from 'vue'
import {useRoute} from 'vue-router'
// 实例化路由对象(包含当前路由的详细信息)
var $route = useRoute();

// var tableData = reactive( { } )
var tableData = ref([])

onMounted(() => {
  // console.log(JSON.parse($route.query.id))
  tableData.value = JSON.parse($route.query.id)
  console.log("拿到的值",tableData)
})

</script>

<style>
.el-main>.search{
  margin-top: 30px;
  width: 90%;
  margin: 0 auto;
}
.el-main>.search>.el-button{
  margin: 20px;
}
</style>